<template>
    <baseComponents>
        <el-row>
            <el-breadcrumb separator="/" style="margin-bottom: 10px;">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ name: path }">{{ article.tag }}</el-breadcrumb-item>
                <el-breadcrumb-item>正文</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="18">
                <div v-if="!article">
                    <div v-for="i in 10" :key="i">
                        <el-skeleton style="--el-skeleton-circle-size: 100px">
                        </el-skeleton>
                    </div>
                </div>
                <mainArticleComponents :article="article" />
            </el-col>
            <el-col :span="6">
                <slideArticleComponents :tag="article.tag" :id="article.id" />
            </el-col>
        </el-row>
    </baseComponents>
</template>

<script>
import $ from 'jquery';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import mainArticleComponents from '@/components/article/mainArticleComponents.vue';
import slideArticleComponents from '@/components/article/slideArticleComponents.vue';
import baseComponents from '@/components/global/baseComponents.vue';
import router from '@/router';
export default {
    name: "articleShowView",
    components: {
        mainArticleComponents,
        baseComponents,
        slideArticleComponents,
    },
    setup() {
        const route = useRoute();
        let id = ref(route.query.id);
        let article = ref({});
        let tag = ref();
        let getInfo = () => {
            $.ajax({
                type: "post",
                url: "http://124.221.73.180:3001/articleGet/getArticle/",
                data: {
                    id: id.value,
                },
                async: false,
                success(resp) {
                    if (resp == "error") {
                        router.push({ name: 'notFound' });
                        return;
                    }
                    article.value = JSON.parse(resp);
                    tag.value = article.value.tag;
                    document.title = article.value.title;
                }, error() {
                    router.push({ name: 'notFound' });
                }
            });
        }
        getInfo();
        let path = ref('');
        let tagPath = () => {
            switch (tag.value) {
                case "新闻资讯": path.value = "newArticle"; break;
                case "精彩活动": path.value = "activity"; break;
                case "红色景点": path.value = "sight"; break;
                case "人物故事": path.value = "person"; break;
                case "党建党史": path.value = "build"; break;
                case "红色历史": path.value = "history"; break;
            }
        }
        tagPath();
        return {
            getInfo,
            path,
            article,
        }
    }
}
</script>

<style scoped></style>